<!DOCTYPE html>  
  
<head>  
    <meta charset="utf-8">  
    <title>ECharts</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
        }
        *{
            margin: 0;
            padding: 0;
        }
    </style>
</head>  
  
<body>  
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  
    <div id="main" style="width: 100%;height: 100%;"></div>
    <!-- ECharts单文件引入 -->
    <script type="text/javascript" src="p85/cityMap.js"></script>
    <script type="text/javascript" src="p85/shanxi_data.js"></script>
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
        require.config({  
            paths: {  
                echarts: 'http://echarts.baidu.com/build/dist'  
            }  
        });
        var convertData = function (data) {
				    var res = [];
				    for (var i = 0; i < data.length; i++) {
				        var geoCoord = cityMap[data[i].name];
				        if (geoCoord) {
				            res.push(geoCoord.concat(data[i].value));
				        }
				    }
				    return res;
				};
        // 使用  
        require(  
            [  
                'echarts',  
                'echarts/chart/map'
            ],
            function(echarts) {  
                // 基于准备好的dom，初始化echarts图表  
                var myChart = echarts.init(document.getElementById('main'));
                var option = {
                    title: {  
                        text: '陕西高端人才分布情况',
                        x: 'center',
                        y:'80',
                        textStyle:{color:'#FFF',fontSize: 22}
                    },
                    tooltip: {  
                        trigger: 'item'
                    },  
                    legend: {
                    	show:false,
                        orient: 'vertical',  
                        x: 'left',  
                        data: ['高端人才'],  
                    },
                    backgroundColor: '#0A0F23',
                    dataRange: {
                        x: '10%',
                        y: '65%',
                        textStyle: {
                            color: '#fff',
                            fontSize:16
                        },
                        splitList: [{  
                            start: 10000
                        }, {
                            start: 8500,
                            end: 10000
                        }, {
                            start: 6500,
                            end: 8500
                        }, {
                            start: 4500,
                            end: 6500
                        }, {
                            start: 2500,
                            end: 4500,
                        }, {
                            start: 2500,
                            end: 500,
                        }, {
                            end: 500
                        }],  
                        color: ['#F7646C','#E17D35','#17D4EE']
                    },
                    toolbox: {  
                        show: true,  
                        orient: 'vertical',  
                        x: 'right',  
                        y: 'center',  
                    },  
                    series: [{  
                        name: '高端人才',  
                        type: 'map',  
                        mapType: '陕西',  
                    		mapLocation: {
                    			y:'15%',
                    			x:'35%'
                    		},
                        selectedMode: 'single',  
                        itemStyle: {  
                          normal: {  
	                            label: {  
	                                show: true,  
	                                textStyle: {  
					                            color: '#fff',
					                            fontSize: 16
	                                }  
	                            }
	                        },  
	                        emphasis: { 
	                        	label: {
	                        		show: true,
	                            textStyle: {  
				                            color: '#fff',
				                            fontSize: 16
	                            }
	                          }
	                        }
                        },  
                        data: data,
						            heatmap: {
						                minAlpha: 100,
						                data: convertData(hdata)
						            }
                    }]
                };
                myChart.setOption(option);
            }  
        );  
    </script>  
</body>